<template>
  <!-- 敏捷项目详情 -->
  <div class="survey">
    <div class="title">
      <div class="des">
        <el-select
          placeholder=""
          v-model="value1"
          popper-class="popper-select"
          :popper-append-to-body="false"
          @change="selectImg($event)"
          v-show="edit === true"
        >
          <template slot="prefix">
            <img :src="value1" alt="" />
          </template>

          <el-option
            v-for="item in avatars"
            :key="item.Id"
            :label="item.src"
            :value="item.src"
          >
            <div class="proimg">
              <img class="avatar" :src="item.src" />
            </div>
          </el-option>
        </el-select>
        <img :src="listdata.logo" alt="" v-show="edit === false" />
        <div class="text">
          <p>{{ listdata.name }}</p>
          <span v-if="listdata.type === 2">软件敏捷开发项目</span>
          <span v-else>瀑布式协作项目</span>
        </div>
        <div
          class="level"
          :class="
            listdata.level <= 100
              ? 'LvOne'
              : listdata.level > 100 && listdata.level <= 200
              ? 'LvTwo'
              : 'LvThree'
          "
        >
          lv{{ listdata.level }}
        </div>
      </div>
      <div class="modify">
        <button
          @click="handleCloseProject()"
          v-if="this.listdata.status === 2 && nowUserType === 1"
          class="cancel"
        >
          结束项目
        </button>
        <button
          @click="handleCloseProject()"
          v-else-if="listdata.status === 2 && userType === 1"
          class="cancel"
        >
          结束项目
        </button>
        <button
          @click="changeStatus(listdata.id, listdata.status)"
          v-if="listdata.status === 1 && (userType === 1 || nowUserType === 1)"
          class="cancel"
        >
          启动项目
        </button>
        <template>
          <button
            @click="handleDelProject()"
            class="cancel"
            v-if="userType === 1"
          >
            删除
          </button>
          <button
            @click="handleDelProject()"
            class="cancel"
            v-else-if="nowUserType === 1 && this.listdata.label === 2"
          >
            删除
          </button>
          <!-- <button @click="handleDelProject()" class="cancel" v-else-if="userType === 1 && this.listdata.label === 3">删除</button> -->
        </template>
        <button @click="copyProject()" class="cancel" v-if="this.listdata.label === 1">
          复制
        </button>
        <button
          class="edit"
          @click="startEdit"
          v-if="nowUserType === 1 || userType === 1"
        >
          编辑
        </button>
      </div>
    </div>
    <div class="infotable">
      <table cellpadding="0" cellspacing="0">
        <tr height="120">
          <td width="25%">
            <div class="missioner">
              <span>项目负责人:</span>
              <div v-if="listdata.managerList">
                <div
                  class="missionerinfo"
                  v-for="item in listdata.managerList.slice(0, 1)"
                  :key="item.index"
                >
                  <!-- <p>{{ item.roleName }}</p> -->
                  <template v-if="(item.roleName.length = 1)">
                    <p v-for="(item1, index) in item.roleName" :key="index">
                      <template v-if="item1">
                        {{ item1.rolename }}
                      </template>
                    </p>
                  </template>
                  <template v-else-if="(item.roleName.length = 0)">
                    <p>&nbsp;</p>
                  </template>
                  <img :src="item.avatar" alt="" />
                  <p>{{ item.name }}</p>
                </div>
              </div>
              <img
                class="choosemember"
                @click="chooseMissioner = true"
                src="@/assets/missionerplus.png"
                alt=""
                v-show="edit === true"
              />
            </div>
          </td>
          <td colspan="2" width="50%">
            <div class="missioner">
              <span>项目成员:</span>
              <div v-if="listdata.groupUserName" class="roleDiv">
                <div
                  class="missionerinfo"
                  v-for="item in listdata.groupUserName.slice(0, 8)"
                  :key="item.index"
                >
                  <!-- <p>{{ item.roleName }}</p> -->
                  <template
                    v-if="item.roleName.length > 0 && item.roleName.length < 2"
                  >
                    <p v-for="item1 in item.roleName" :key="item1.id">
                      <template v-if="item1">
                        {{ item1.rolename }}
                      </template>
                    </p>
                  </template>
                  <template v-else-if="item.roleName.length === 0">
                    <p>&nbsp;</p>
                  </template>
                  <template v-else>
                    <p>多个角色</p>
                  </template>
                  <img :src="item.avatar" alt="" />
                  <p>{{ item.name }}</p>
                </div>
              </div>

              <div
                class="moremissioner"
                v-if="
                  listdata.groupUserName && listdata.groupUserName.length > 8
                "
              >
                <span>等{{ listdata.groupUserName.length }}人</span>
              </div>
              <img
                class="choosemember"
                @click="chooseMissioner = true"
                src="@/assets/missionerplus.png"
                alt=""
                v-show="edit === true"
              />
            </div>
          </td>
          <td width="25%">
            <div style="display: flex; align-items: center">
              <span>项目进度及状态:</span>
              <div class="domany">
                <el-progress
                  class="progressBox1"
                  :text-inside="true"
                  :stroke-width="20"
                  v-if="listdata.progress"
                  :percentage="Number(listdata.progress)"
                ></el-progress>
              </div>
              <span class="manystatus notstart" v-if="listdata.status === 1"
                >未开始</span
              >
              <span
                class="manystatus completed"
                v-else-if="listdata.status === 3"
                >已完成</span
              >
              <span class="manystatus ongoing" v-else>进行中</span>
            </div>
          </td>
        </tr>

        <tr>
          <td>
            <span>项目组名称:</span>
            <input
              type="text"
              v-show="edit === true"
              placeholder="请输入项目组名称"
              v-model="listdata.groupName"
              style="width: 70%"
              maxlength="25"
            />
            <span v-show="edit === false">{{ listdata.groupName }}</span>
          </td>
          <td colspan="2">
            <span>项目名称:</span>
            <input
              type="text"
              v-show="edit === true"
              placeholder="请输入项目名称"
              v-model="listdata.name"
              maxlength="25"
            />
            <span v-show="edit === false">{{ listdata.name }}</span>
          </td>
          <td>
            <span>客户信息:</span>
            <input
              type="text"
              v-show="edit === true"
              placeholder="请输入客户信息"
              v-model="listdata.clientInfo"
              maxlength="25"
            />
            <span v-show="edit === false">{{ listdata.clientInfo }}</span>
          </td>
        </tr>
        <tr>
          <td>
            <span>开始时间:</span>
            <el-date-picker
              size="mini"
              v-model="listdata.startDate"
              align="right"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择项目开始日期"
              v-show="edit === true"
            >
            </el-date-picker>
            <span v-show="edit === false">{{ listdata.startDate }}</span>
          </td>
          <td>
            <span>结束时间:</span>
            <el-date-picker
              size="mini"
              v-model="listdata.endDate"
              align="right"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择项目结束日期"
              v-show="edit === true"
            >
            </el-date-picker>
            <span v-show="edit === false">{{ listdata.endDate }}</span>
          </td>
          <td>
            <span>项目周期:</span>
            <span>{{ listdata.developmentPeriod }}</span>
          </td>
          <td>
            <span>过期：</span>
            <span>{{ listdata.day }}</span>
          </td>
        </tr>
        <tr v-show="userType === 1">
          <td>
            <span>项目编号:</span>
            <span>{{ listdata.code }}</span>
          </td>
          <td>
            <span>创建人:</span>
            <span v-for="(item, id) in listdata.createList" :key="id"
              >{{ item.name }}&nbsp;&nbsp;&nbsp;</span
            >
            <img
              class="choosemember"
              @click="chooseMissioner = true"
              src="@/assets/missionerplus.png"
              alt=""
              v-show="edit === true"
            />
          </td>
          <td>
            <span>项目等级:</span>
            <input
              oninput="if(value.length>3)value=value.slice(0,3)"
              type="number"
              placeholder="请输入项目等级"
              style="width: 50%"
              v-show="edit === true"
              v-model="listdata.level"
              @input="isTrueNum($event)"
            />
            <span v-show="edit === false">{{ listdata.level }}</span>
          </td>
          <td>
            <span>项目类型:</span>
            <span v-if="listdata.label === 2">自建</span>
            <span v-else-if="listdata.label === 1">模板</span>
            <span v-else-if="listdata.label === 3">复制</span>
          </td>
        </tr>
        <tr v-show="userType === 1">
          <td colspan="2">
            <span>评分表:</span>
            <span v-show="edit === false">{{ listdata.evaluationName }}</span>
            <el-select
              placeholder="请选择评分表"
              v-model="listdata.evaluationName"
              v-show="edit === true"
              @change="selectEva($event)"
              style="width: 30%"
            >
              <el-option
                v-for="item in optionSelect"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </td>
          <td colspan="2">
            <span>课时数:</span>
            <span v-show="edit === false">{{ listdata.hours }}</span>
            <input
              type="number"
              v-show="edit === true"
              v-model.number="listdata.hours"
              style="width: 60%"
              oninput="if(value.length>3)value=value.slice(0,3)"
              placeholder="请输入课时数"
              @input="isTrueNum1($event)"
            />
          </td>
        </tr>
      </table>
    </div>
    <!-- 添加模块部分 -->
    <div class="funmodule">
      <span>功能模块</span>
      <el-table
        :data="listdata.projectmoduleList"
        border
        class="customTable"
        :header-cell-style="{ textAlign: 'center', borderColor: '#DAE1FD' }"
        :cell-style="{ textAlign: 'center', borderColor: '#DAE1FD' }"
      >
        <el-table-column label="模块名称" width="260">
          <template slot="header">
            <span>模块名称</span>
            <button
              class="addfunc"
              @click="addNewFunction()"
              v-show="edit === true"
            ></button>
          </template>
          <template slot-scope="scope">
            <span v-show="edit === false">{{ scope.row.name }}</span>
            <input
              type="text"
              v-model="scope.row.name"
              maxlength="12"
              placeholder="请输入模块名（限制12字）"
              style="outline: none; border: none; text-align: center"
              v-show="edit === true"
            />
            <button
              @click="delFunction(scope.$index)"
              class="delfunc"
              v-show="edit === true"
            ></button>
          </template>
        </el-table-column>
        <el-table-column label="模块描述" prop="description">
          <template slot-scope="scope">
            <!-- <input
                type="text"
                v-model="scope.row.description"
                placeholder="请输入描述（限制200字）"
                maxlength="200"
                style="
                  outline: none;
                  border: none;
                  text-align: center;
                  width: 90%;
                "
              /> -->
            <span v-show="edit === false">{{ scope.row.description }}</span>

            <textarea
              name=""
              id=""
              cols="80"
              rows="3"
              maxlength="200"
              placeholder="请输入描述（限制200字）"
              v-model="scope.row.description"
              style="outline: none; border: none; width: 100%; resize: none"
              v-show="edit === true"
            ></textarea>
          </template>
        </el-table-column>
        <el-table-column label="需求数量" width="149" prop="demand">
        </el-table-column>
        <el-table-column label="缺陷数量" width="149" prop="defect">
        </el-table-column>
      </el-table>
    </div>
    <div class="funmodule">
      <span>版本迭代</span>

      <el-table
        :data="listdata.projectiterationList"
        border
        class="customTable"
        :header-cell-style="{ textAlign: 'center', borderColor: '#DAE1FD' }"
        :cell-style="{ textAlign: 'center', borderColor: '#DAE1FD' }"
      >
        <el-table-column label="版本名" width="260">
          <template slot="header">
            <span style="text-align: center">版本名</span>
            <button
              class="addfunc"
              @click="addNewVersion()"
              v-show="edit === true"
            ></button>
          </template>
          <template slot-scope="scope">
            <span v-show="edit === false">{{ scope.row.name }}</span>

            <input
              type="text"
              v-model="scope.row.name"
              maxlength="12"
              style="outline: none; border: none; text-align: center"
              placeholder="请输入版本名（限制12字）"
              v-show="edit === true"
            />
            <button
              @click="delVersion(scope.$index)"
              class="delfunc"
              v-show="edit === true"
            ></button>
          </template>
        </el-table-column>
        <el-table-column label="迭代时间">
          <!-- <template slot-scope="scope"> -->
          <!-- {{ startdate }} 至 {{ enddate }} -->
          <!-- </template> -->
          <template slot-scope="scope">
            <span v-show="edit === false">{{ scope.row.startdate }}</span>

            <el-date-picker
              v-model="scope.row.startdate"
              align="right"
              type="date"
              placeholder="选择开始日期"
              v-show="edit === true"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
            <span>&nbsp;&nbsp;至&nbsp;&nbsp;</span>
            <span v-show="edit === false">{{ scope.row.enddate }}</span>

            <el-date-picker
              v-model="scope.row.enddate"
              align="right"
              type="date"
              placeholder="选择结束日期"
              value-format="yyyy-MM-dd"
              v-show="edit === true"
            >
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column label="描述" prop="description">
          <template slot-scope="scope">
            <!-- <input
                type="text"
                v-model="scope.row.description"
                placeholder="请输入描述（限制200字）"
                maxlength="200"
                style="
                  outline: none;
                  border: none;
                  text-align: center;
                  width: 90%;
                "
              /> -->
            <span v-show="edit === false">{{ scope.row.description }}</span>

            <textarea
              name=""
              id=""
              cols="80"
              rows="5"
              maxlength="200"
              v-model="scope.row.description"
              placeholder="请输入描述（限制200字）"
              style="outline: none; border: none; width: 100%; resize: none"
              v-show="edit === true"
            ></textarea>
          </template>
        </el-table-column>
        <el-table-column label="需求数量" width="149" prop="demand">
        </el-table-column>
        <el-table-column label="缺陷数量" width="149" prop="defect">
        </el-table-column>
      </el-table>
    </div>
    <!-- 编辑弹层 -->
    <editAGProject
      ref="editChild"
      :listdata.sync="this.listdata"
      :value1="this.value1"
      @updateList="initPage"
    >
    </editAGProject>
    <div class="footertab">
      <a
        href="javasript:void(0);"
        :class="index == isactive ? 'active' : ''"
        @click="handelchange(index)"
        :key="index"
        v-for="(item, index) in footertablist"
      >
        {{ item.name }}
        <span class="litline"></span>
      </a>
    </div>
    <dosth
      :is="footerview"
      :logVoList.sync="logList"
      :commentList="commentList"
      :commentUserId="userid"
      keep-alive
    ></dosth>
  </div>
</template>

<script>
import dosth from '../footertab/dosth.vue';
import projectinfo from '../footertab/projectinfo.vue';
import editAGProject from '../editcompoents/editAGProject.vue';
import { getprodetail, finishProject } from '@/api//project/prodetail';
import { getevaluation } from '@/api//project/getevaluation';
import { copyProject } from '@/api//project/survey';
import { updateProject } from '@/api//project/buildProject';
import { delProject, modifyStatus } from '@/api//project/projectlist';

export default {
  name: 'survey',
  data() {
    return {
      // 使用者类型
      userType: Number(sessionStorage.getItem('usertype')),
      userid: Number(sessionStorage.getItem('userid')),

      edit: false,
      logList: [],
      optionSelect: [],
      // 评分表值
      value: '',
      // 头像值
      value1: '',
      nowUserType: 0,
      avatars: [
        {
          src: '/static/project1.png',
          Id: '0'
        },
        {
          src: '/static/project2.png',
          Id: '1'
        },
        {
          src: '/static/project3.png',
          Id: '2'
        },
        {
          src: '/static/project4.png',
          Id: '3'
        },
        {
          src: '/static/project5.png',
          Id: '4'
        }, {
          src: '/static/project6.png',
          Id: '5'
        }
      ],
      newData:
      {
        project: {
          clientinfo: '',
          enddate: '',
          evaluationid: null,
          groupname: '',
          id: 0,
          createdid: null,
          level: null,
          managerid: null,
          name: '',
          phase: null,
          startdate: ''
        },
        // 项目功能模块
        projectmoduleList: [],
        // 项目版本迭代
        projectiterationList: [],
        projectuserList: [
          {
            createtime: '',
            evaluationroleid: null,
            id: null,
            projectid: null,
            rolename: '',
            type: null,
            userid: null
          }
        ]

      },
      manywidth: 80,
      isactive: 0,
      footerview: 'projectinfo',
      footertablist: [
        { name: '项目评论' },
        { name: '操作日志' }
      ],
      currentView: 'projectinfo',
      listdata: [],
      commentList: []

    };
  },
  components: {
    dosth,
    projectinfo,
    editAGProject
  },
  mounted() {
    // 获取该项目详情
    getprodetail(Number(localStorage.getItem('projectId')), Number(sessionStorage.getItem('usertype'))).then(res => {
      // console.log(res);
      this.listdata = res.data;
      this.logList = res.data.logList;
      this.value1 = res.data.logo;
      this.commentList = res.data.commentList;
      // 判断是否为当前项目的负责人
      res.data.managerList.forEach(item => {
        if (item.id === this.userid) {
          this.nowUserType = 1;
        }
      });
      res.data.createList.forEach(item => {
        if (item.id === this.userid) {
          this.nowUserType = 1;
        }
      });
    });
    // 获取该项目评分表
    getevaluation(Number(sessionStorage.getItem('userid'))).then(res => {
      // console.log(res);
      this.optionSelect = res.data;
      // console.log(this.optionSelect);
    });
  },
  methods: {
    // 初始化页面
    // 获取该项目详情
    initPage() {
      getprodetail(Number(localStorage.getItem('projectId')), Number(sessionStorage.getItem('usertype'))).then(res => {
        // console.log(res);
        this.listdata = res.data;
        this.logList = res.data.logList;
        this.value1 = res.data.logo;
        sessionStorage.setItem('projectLabel', res.data.label);
        sessionStorage.setItem('nowUserType', this.nowUserType);
        // 判断是否为当前项目的负责人
        res.data.managerList.forEach(item => {
          if (item.id === this.userid) {
            this.nowUserType = 1;
          }
        });
        res.data.createList.forEach(item => {
          if (item.id === this.userid) {
            this.nowUserType = 1;
          }
        });
      });
    },

    handelchange(index) {
      this.isactive = index;
      if (index === 0) {
        this.footerview = 'projectinfo';
      } else {
        this.footerview = 'dosth';
      }
    },
    // 点击编辑
    startEdit() {
      this.$refs.editChild.openEdit();
      // this.edit = !this.edit;
      // this.showDialog = true;
    },
    // 选取项目头像
    selectImg(val) {
      // console.log(val);
      this.value1 = val;
    },
    // 添加版本和功能模块
    addNewFunction() {
      // console.log('添加成功');
      this.listdata.projectmoduleList.push({
        description: '',
        id: 0,
        name: '',
        projectid: 0
      });
    },
    addNewVersion() {
      // console.log('添加成功');
      this.listdata.projectiterationList.push({
        description: '',
        id: 0,
        name: '',
        projectid: 0,
        enddate: '',
        startdate: ''
      });
    },
    // 删除版本和功能
    delFunction(val) {
      // console.log('sahnchu', val);
      this.listdata.projectmoduleList.splice(val, 1);
    },
    delVersion(val) {
      // console.log('sahnchu');
      this.listdata.projectiterationList.splice(val, 1);
    },
    // 选择评分表
    selectEva(e) {
      // console.log(e);
      this.value = e;
    },
    // 判断输入数字等级
    isTrueNum(event) {
      if (event.target.value > 300 || event.target.value <= 0) {
        this.$message({
          showClose: true,
          type: 'warning',
          message: '请输入1-300的数字'
        });
        // event.target.value = 1;
        this.listdata.level = null;
      }
    },
    // 判断输入数字课时
    isTrueNum1(event) {
      // console.log(event.target.value);
      if (event.target.value > 1000 || event.target.value <= 0) {
        this.$message({
          showClose: true,
          type: 'warning',
          message: '请输入1-999的数字'
        });
        // event.target.value = 1;
        this.listdata.hours = null;
      }
    },
    // 删除按钮
    handleDelProject() {
      // console.log('shanchu');
      this.$confirm('是否删除该项目?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delProject(Number(this.$route.params.projectId)).then(res => {
          // console.log(res);
          if (res.code === 200) {
            this.$message({
              showClose: true,
              type: 'success',
              message: '项目已成功删除'
            });
            this.$router.push('Project');
          }
        });
      }).catch(() => {
        this.$message({
          showClose: true,
          type: 'info',
          message: '取消删除'
        });
      });
    },
    // 关闭项目按钮
    handleCloseProject() {
      // console.log('guanbi');
      if (this.listdata.status === 3) {
        this.$message({
          showClose: true,
          type: 'info',
          message: '当前项目为已完成，无需修改'
        });
      } else if (this.listdata.status === 1) {
        this.$message({
          showClose: true,
          type: 'info',
          message: '当前项目还未启动'
        });
      } else {
        this.$confirm('是否修改项目状态为已完成?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          finishProject(this.$route.params.projectId).then(res => {
            // console.log(res);
            if (res.code === 200) {
              this.$message({
                showClose: true,
                type: 'success',
                message: '修改成功'
              });
              this.listdata.status = 3;
              this.listdata.progress = 100;
            }
          });
        }).catch(() => {
          this.$message({
            showClose: true,
            type: 'info',
            message: '取消修改'
          });
        });
      }
    },
    // 修改项目状态为启动项目
    changeStatus(data, data1) {
      if (data1 === 2) {
        this.$message({
          showClose: true,
          type: 'info',
          message: '当前项目已启动'
        });
      } else if (data1 === 3) {
        this.$message({
          showClose: true,
          type: 'info',
          message: '当前项目已完成'
        });
      } else {
        this.$confirm('是否启动该项目！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let changeArray = [];
          changeArray.push(data);
          modifyStatus(changeArray).then(res => {
            // this.$router.go(0);
            this.initPage();
            this.$message({
              showClose: true,
              type: 'success',
              message: '启动成功!'
            });
          });
        }).catch(() => {
          this.$message({
            showClose: true,
            type: 'info',
            message: '取消启动'
          });
        });
      }
    },
    // 复制按钮
    copyProject() {
      copyProject(Number(this.$route.params.projectId), Number(sessionStorage.getItem('userid'))).then(res => {
        if (res.code === 200) {
          this.$message({
            showClose: true,
            type: 'success',
            message: '复制成功!'
          });
        } else {
          this.$message({
            showClose: true,
            type: 'info',
            message: res.msg
          });
        }
      });
    },
    // 取消编辑按钮
    cancelEdit() {
      this.$confirm('是否取消编辑?当前更改的内容将不会保存！', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.edit = false;
        this.$message({
          showClose: true,
          type: 'success',
          message: '编辑内容已取消!'
        });
      }).catch(() => {
        this.$message({
          showClose: true,
          type: 'info',
          message: '继续编辑'
        });
      });
    },
    // 确认按钮
    confirmEdit() {
      this.$confirm('是否完成编辑?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.newData.project.clientinfo = this.listdata.clientInfo;
        this.newData.project.enddate = this.listdata.endDate;
        this.newData.project.evaluationid = this.value;
        this.newData.project.groupname = this.listdata.groupName;
        this.newData.project.id = this.listdata.id;
        this.newData.project.level = this.listdata.level;
        this.newData.project.name = this.listdata.name;
        this.newData.project.phase = this.listdata.phase;
        this.newData.project.startdate = this.listdata.startDate;
        this.newData.project.phase = this.phase;
        this.newData.project.hours = this.listdata.hours;
        this.newData.project.createdid = this.listdata.createdId;
        this.newData.projectmoduleList = this.listdata.projectmoduleList;
        this.newData.projectiterationList = this.listdata.projectiterationList;
        this.newData.project.logo = this.value1;
        // this.projectuserList.groupname = this.listdata.groupName;
        // this.projectuserList.groupname = this.listdata.groupName;
        // this.projectuserList.groupname = this.listdata.groupName;
        // this.projectuserList.groupname = this.listdata.groupName;
        // this.projectuserList.groupname = this.listdata.groupName;
        // this.projectuserList.groupname = this.listdata.groupName;
        let update = JSON.stringify(this.newData);
        if (!this.newData.project.name || !this.newData.project.level) {
          return this.$message({
            type: 'warning',
            message: '项目名称、项目等级不能为空或检查完善其他信息！'
          });
        }
        updateProject(update).then(res => {
          // console.log('修改保存成功', this.newData, res);
          if (res.code === 200) {
            this.edit = !this.edit;
            this.$message({
              showClose: true,
              type: 'success',
              message: '修改内容已保存!'
            });
            // 获取该项目详情
            getprodetail(Number(this.$route.params.projectId), Number(sessionStorage.getItem('usertype'))).then(res => {
              // console.log(JSON.parse(JSON.stringify(res.data)));
              this.listdata = res.data;
            });
          } else {
            this.$message({
              showClose: true,
              type: 'warning',
              message: res.msg
            });
          }
        });
      }).catch(() => {
        this.$message({
          showClose: true,
          type: 'info',
          message: '继续编辑'
        });
      });
    },
    // 编辑时可修改项目状态
    changProjectPhase(e) {
      // console.log(e.target.dataset.index);
      if (this.edit) {
        this.phase = e.target.dataset.index;
      }
    }
  }

};
</script>

<style lang="less" scoped>
.survey {
  width: 100%;
  min-height: 836px;
  background-color: #ffffff;
  box-shadow: 1px -2px 3px 0px rgba(153, 153, 153, 0.5),
    1px 2px 3px 0px rgba(153, 153, 153, 0.5);
  margin-top: -4px;
  border-radius: 0 5px 5px 5px;
  .title {
    width: 98%;
    height: 45px;
    margin: 0 auto;
    padding-top: 36px;
    margin-bottom: 38px;
    position: relative;
    .des {
      width: 440px;
      height: 45px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      .avatar {
        width: 41px;
        height: 41px;
        position: absolute;
        left: 20%;
        top: 15%;
      }
      img {
        width: 45px;
        height: 45px;
      }
      .text {
        margin-left: 20px;
        p {
          margin: 0;
          font-size: 16px;
          font-weight: 400;
          color: #222222;
          line-height: 28px;
        }
        span {
          font-size: 12px;
          font-weight: 400;
          color: #555555;
          line-height: 20px;
        }
      }
      .level {
        align-self: flex-start;
        text-align: center;
        font-size: 12px;
        font-family: SukhumvitSet-Bold, SukhumvitSet;
        font-weight: bold;
        color: #ffffff;
        line-height: 21px;
        font-weight: bold;
        width: 60px;
        height: 21px;
        border-radius: 10px;
        margin-top: 5px;
        margin-left: 20px;
      }
      .LvOne {
        background: #c5f5d1;
      }
      .LvTwo {
        background: #f7cbd2;
      }
      .LvThree {
        background: #cbd5f5;
      }
    }
  }
  .modify {
    width: auto;
    height: 40px;
    position: absolute;
    top: 36px;
    right: 0px;
    button {
      width: 115px;
      height: 40px;
      font-size: 16px;
      font-weight: 400;
      line-height: 40px;
      text-align: center;
      border-radius: 4px;
      margin-left: 18px;
      cursor: pointer;
    }
    .cancel {
      background: #e8f8fb;
      color: #2fc0e0;
    }
    .edit {
      background: #2fc0e0;
      color: #ffffff;
      box-shadow: 0 0 5px #2fc0e0;
    }
    .finish {
      background: #2fc0e0;
      color: #ffffff;
      box-shadow: 0 0 5px #2fc0e0;
    }
  }
  .infotable {
    margin-bottom: 20px;
    padding: 0 20px;
    box-sizing: border-box;
    table {
      width: 100%;
      margin: 0 auto;
      border-left: 1px solid #f1f4ff;
      border-top: 1px solid #f1f4ff;
      .choosemember {
        cursor: pointer;
        width: 40px;
        height: 40px;
        margin-left: 10px;
        vertical-align: middle;
      }
      span {
        font-size: 14px;
        color: #333;
      }
      tr {
        td:focus-within {
          box-shadow: inset 0px 1px 4px 0px #2fc0e0,
            inset 0px -1px 4px 0px #2fc0e0, inset 1px 0px 4px 0px #2fc0e0,
            inset -1px 0px 4px 0px #2fc0e0;
        }
        td {
          padding-left: 20px;
          height: 60px;
          text-align: left;
          border-right: 1px solid #f1f4ff;
          border-bottom: 1px solid #f1f4ff;
          .missioner {
            display: flex;
            align-items: center;
            .choosemember {
              cursor: pointer;
              width: 40px;
              height: 40px;
            }
            .editspan {
              margin: 0 10px;
              display: inline-block;
              width: 100px;
              height: 40px;
              background: #e8f8fb;
              border-radius: 4px;
              color: #555;
              line-height: 40px;
              text-align: center;
            }
            .missionerinfo {
              display: inline-block;
              text-align: center;
              p {
                font-size: 12px;
                margin: 0;
                color: #555;
              }
              img {
                width: 45px;
                height: 45px;
                border-radius: 50%;
              }
            }
            .moremissioner {
              width: 40px;
              height: 40px;
              border-radius: 50%;
              background: #e8f8fb;
              box-shadow: 1px 1px 3px #d7d7d7;
              border: 3px solid #ffffff;
              color: #e8f8fb;
              text-align: center;
              line-height: 40px;
              span {
                font-size: 12px;
                color: #2fc0e0;
              }
            }
            img {
              width: 70px;
              height: 70px;
              margin: 0 10px;
            }
          }
          .domany {
            // border: 1px solid #6c59cc;
            width: 150px;
            height: 20px;
            // border-radius: 16px;
            margin: 0 10px;
            // padding: 4px;
            // .many {
            //   display: inline-block;
            //   height: 100%;
            //   background-image: linear-gradient(
            //     270deg,
            //     #1160cf 0%,
            //     #cd06bf 100%
            //   );
            //   border-radius: 12px;
            //   text-align: center;
            //   vertical-align: top;

            //   color: black;
            //   line-height: 24px;
            // }
            // .many1 {
            //   display: inline-block;
            //   height: 100%;
            //   background-image: linear-gradient(
            //     270deg,
            //     #1160cf 0%,
            //     #cd06bf 100%
            //   );
            //   border-radius: 12px;
            //   vertical-align: top;

            //   text-align: center;
            //   color: white;
            //   line-height: 24px;
            // }
          }
          .manystatus {
            display: inline-block;
            font-size: 14px;
          }
          .ongoing {
            color: #ffd167;
          }
          .ongoing::before {
            content: "";
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #ffd167;
            margin-right: 3px;
            box-shadow: 0 0 3px #ffd167;
          }
          .notstart {
            color: #555555;
          }
          .notstart::before {
            content: "";
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #555555;
            margin-right: 3px;
            box-shadow: 0 0 3px #555555;
          }
          .completed {
            color: #3ea528;
          }
          .completed::before {
            content: "";
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #3ea528;
            margin-right: 3px;
            box-shadow: 0 0 3px #3ea528;
          }
        }
      }
    }
  }
  .roleDiv {
    display: flex;
  }
  .funmodule {
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    span {
      font-size: 14px;
      color: #333;
      font-weight: bold;
      margin-bottom: 10px;
      margin-top: 30px;
      float: left;
    }
    .addfunc {
      width: 18px;
      height: 18px;
      background: url("~@/assets/addfunction.png") no-repeat center center;
      background-size: 100% 100%;
      margin-left: 3px;
      margin-top: 2px;
      float: right;
      cursor: pointer;
    }
    .delfunc {
      width: 18px;
      height: 18px;
      background: url("~@/assets/delfunction.png") no-repeat center center;
      background-size: 100% 100%;
      margin-left: 3px;
      margin-top: 3px;
      float: right;
      cursor: pointer;
    }
    .el-table {
      margin-bottom: 30px;
      border-top: 1px solid #f1f4ff;
      border-left: 1px solid #f1f4ff;

      span {
        float: none;
        font-weight: normal;
      }
    }
  }
  .el-table {
    margin-bottom: 30px;
    border-top: 1px solid #f1f4ff;
    border-left: 1px solid #f1f4ff;
  }
  /deep/ .el-table th {
    height: 55px;
    text-align: center;
    font-size: 14px;
    font-weight: normal;
    color: #333;
    line-height: 22px;
    background: #f1f5ff;

    td {
      border-right: 1px solid #f1f4ff;
      border-bottom: 1px solid #f1f4ff;
    }
  }
  input {
    border: none;
    width: 80%;
    height: 80%;
    outline: none;
    transition: all 0.3s;
    border-radius: 5px;
  }

  select {
    border: none;
    width: 65%;
    height: 80%;
    outline: none;
    transition: all 0.3s;
    border-radius: 5px;
  }
  select:hover {
    box-shadow: 2px 2px 4px 0px #2fc0e0;
  }
  /deep/ .el-input__inner {
    border: none;
  }
  /deep/.el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    // width: 45px !important;
    // height: 45px !important;
    background-color: #2fc0e0;
  }
  .footertab {
    text-align: left;
    margin-top: 20px;
    width: 100%;
    a {
      color: rgb(94, 94, 94);
      font-size: 14px;
      margin: 0 20px;
    }
    .active {
      color: #111;
      font-size: 18px;
      font-weight: bolder;
      position: relative;
      .litline {
        position: absolute;
        bottom: -10px;
        left: 25%;
        display: inline-block;
        width: 35px;
        height: 8px;
        border-radius: 4px;
        background: linear-gradient(180deg, #1160cf 0%, #cd06bf 100%);
      }
    }
  }
  // 头像样式
  /deep/.el-select {
    width: 74px;
    height: 45px;
    border: none;
  }
  /deep/.el-select-dropdown__item {
    width: 68px !important;
    height: 68px !important;
    border-radius: 7px;
    padding: 0;
    margin: 0 auto;
    position: relative;
  }
  /deep/.el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    // width: 45px !important;
    // height: 45px !important;
    background-color: #2fc0e0;
  }
  /deep/.el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    img {
      width: 45px !important;
      height: 45px !important;
      left: 16% !important;
      top: 17% !important;
    }
  }

  /deep/ .el-input__inner {
    border: none;
  }
  /deep/.el-select-dropdown__list {
    height: 420px !important;
  }
  /deep/.el-select-dropdown__wrap {
    max-height: 430px !important;
    box-shadow: 2px 2px 4px 0px rgba(169, 184, 244, 0.5) !important;
  }

  /deep/.el-scrollbar__bar.is-vertical {
    display: none !important;
  }
  // 清除鼠标悬浮表格背景
  /deep/.el-table tbody tr:hover > td {
    background-color: transparent !important;
  }
  /deep/.el-table tbody td:focus-within {
    box-shadow: inset 0px 1px 4px 0px #2fc0e0, inset 0px -1px 4px 0px #2fc0e0,
      inset 1px 0px 4px 0px #2fc0e0, inset -1px 0px 4px 0px #2fc0e0;
  }
  // 清除input按钮
  /deep/ input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  input[type="number"] {
    -moz-appearance: textfield;
  }
}
</style>
